<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 悬停表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container" id="app">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" :checked="allselected" id="">
                        全选
                    </th>
                    <th>名称</th>
                    <th>数量</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody  v-for="item in goods">
                <tr>
                    <td>
                        <input type="checkbox"  :checked="item.sec" name="" id="">
                    </td>
                    <td>
                        {{item.name}}
                    </td>
                    <td>
                        {{item.num}}

                    </td>
                    <td>
                        {{item.price}}

                    </td>
                </tr>
            </tbody>   
            <tfoot>
                <tr>
                    <td>
                        总计： {{allPrice}}
                    </td>
                </tr>
            </tfoot>     
        </table>
        
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                allPrice:0,
                allselected:false,
                goods: [
                    {
                        name: "手机",
                        num: 1,
                        price: 2080,
                        sec:true
                    },
                    {
                        name: "手表",
                        num: 2,
                        price: 3800,
                        sec:false

                    },
                    {
                        name: "戒指",
                        num: 1,
                        price: 22000,
                        sec:false

                    }
                ]

            }
        },
        methods: {
            
        },
        computed:{
            
        }
    })
</script>

</html>